<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style>
* {
    margin:0;
}
ul,li {
    list-style: none;
}
a {
    text-decoration: none;
}
body{
    background: transparent;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
}
#aui-box {
    position: absolute;
    width: 80%;
    height: auto;
    top: 10%;
    left: 50%;
    margin-left: -40%;
    background: #ffffff;
    z-index: 2;
    overflow: hidden;
    opacity: 0;
}
#aui-box.fadeIn {
    opacity: 1;
    /*-webkit-animation: fadeIn .3s;*/
}
#aui-box-header {
    padding: 10px 15px 0 15px;
    text-align: center;
    font-size: 1em;
}
#aui-box-body {
    padding: 15px;
    overflow: hidden;
    font-size: 0.875em;
}
#aui-box-footer {
    position: relative;
    overflow: hidden;
    font-size: 1em;
}
.aui-box-btn {
    float: left;
    text-align: center;
    position: relative;
    padding: 15px 0;
    z-index: 999;
}
.aui-box-btn:after {
    border-right: 1px solid #dbdbdb;
    border-top: 1px solid #dbdbdb;
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 0 0;
    -webkit-transform: scale(1);
    pointer-events: none;
}
.aui-box-btn:last-child:after {
    border-right: 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    #aui-box-footer:after,
    .aui-box-btn:after {
        right: -100%;
        bottom: -100%;
        -webkit-transform: scale(0.5);
    }
}
@-webkit-keyframes fadeIn {
    0% { background: rgba(0,0,0,0);opacity: 0;}
    100% { opacity: 1; }
}
</style>
<body>
    <div id="aui-box">
        <div id="aui-box-header"></div>
        <div id="aui-box-body"></div>
        <div id="aui-box-footer"></div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
        var title = api.pageParam.title;
        var content = api.pageParam.content;
        var radius = api.pageParam.radius;
        var buttons = api.pageParam.buttons;
        var titleColor = api.pageParam.titleColor;
        var contColor = api.pageParam.contColor;
        var btnColor = api.pageParam.btnColor;
        $api.text($api.byId('aui-box-header'),title);
        $api.html($api.byId('aui-box-body'),content);
        $api.css($api.byId('aui-box-header'),'color:'+titleColor+'');
        var btnHtml = '';
        var btnWidth = 100/buttons.length;
        for(var i in buttons){
            btnHtml += '<div class="aui-box-btn" id="btn-'+i+'" data-status="1" tapmode onclick="btnClick('+i+')" style="color:'+btnColor+';width:'+btnWidth+'%">'+buttons[i]+'</div>';
        }
        $api.html($api.byId("aui-box-footer"),btnHtml);
        var frameHeight = api.frameHeight;
        var boxHeight = $api.offset($api.byId("aui-box")).h;
        if(frameHeight - boxHeight > 100){
            var boxTop = (frameHeight-boxHeight)/2;
            if(boxTop<50){
                boxTop = 100;
            }
            var contMaxHeight = frameHeight/3;
        }else{
            var contMaxHeight = frameHeight/3;
            var boxTop = (frameHeight-contMaxHeight)/3;
        }
        $api.css($api.byId("aui-box-body"),"max-height:"+contMaxHeight+"px;color:"+contColor+"");
        $api.css($api.byId("aui-box"),"top:"+boxTop+"px;opacity:1;border-radius:"+radius+"px");
        $api.addCls($api.byId("aui-box"),"fadeIn");
        api.parseTapmode();
    }
    function btnClick(index){
        api.sendEvent({
            name: 'auiAlertEvent',
            extra: {buttonIndex:index}
        });
        api.closeFrame();
    }
</script>
</html>